<template>
    <div>
        <div class="nav">
            <img src="../../assets/头部.png" alt="">
        </div>
        <div class="title">
            <van-nav-bar
                title="地址管理"
                left-text="返回"
                right-text="删除"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
            />
        </div>
        <div class="address">
            <div class="address_list" @click="onclick">
                <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    default-tag-text="默认"
                    @add="onAdd"
                    @edit="onEdit"
                /> 
            </div>
        </div>
        
    </div>
</template>

<script setup>

// import { AddressList } from 'vant';
// import { NavBar } from 'vant';
import {get,del} from '../../utils/request'
import {  useRouter } from 'vue-router';
import { ref } from 'vue';
import { objectMethod } from '@babel/types';
let list = ref([])
let router = useRouter()
// 左边返回
const onClickLeft = () => history.back()


const chosenAddressId = ref('1');

// 获取地址
let Getaddress=async()=>{
    let res = await get(`/address`)
    // console.log(res);
    let addresslist=res.result

    // console.log(addresslist);
    list.value=[]
    addresslist.forEach((item,index)=>{
            list.value.push({
            areaCode:addresslist[index].area,
            id:addresslist[index].id,
            name:addresslist[index].name,
            tel:addresslist[index].phone,
            address:`${addresslist[index].area_name}${addresslist[index].desc}`,
            desc:addresslist[index].desc,
            isDefault:addresslist[index].default_set==1?true:false
        })
    })


}
Getaddress()
// console.log(add);

//添加地址
const onAdd = () => router.push('/addressEdit');

// 编辑地址
const onEdit = (item) =>{
    console.log(item);
    router.push({
        name:'modificationaddress',
        params:{
            id:item.id,
            name:item.name,
            tel:item.tel,
            areaCode:item.areaCode,
            addressDetail:item.desc
        }
    }) 
}

//右边删除
const onClickRight =async()=>{
    
    let res = await del("/address/" + chosenAddressId.value) ;
    console.log(res);
    Getaddress();
}

const onclick =(e)=>{
    console.log(e);
}

</script>

<style lang="scss" scoped>

.nav{
    width: 100%;
    height: 0.2rem;
}

.title{
    width: 100%;
    height: 0.5rem;
    
}
.address{
    margin-top: 0.1rem;
    min-height: 3.8rem;
    background-color: #F7F8FA;
}

.address_list{
    margin-left: 0.1rem;
    width: 95%;
    height: 1.1rem;
}
</style>